<template>
  <div class="merchant-details">
    <el-drawer :modal-append-to-body="false" :append-to-body="true" title="邀请记录" size="70%" class="box-drawer"
      :with-header="false" :visible.sync="drawerLoading" :show-close="true" @close="cloneDrawer">
      <!--      头部-->
      <div style="position: relative">
        <div class="drawerTitle">
          <span>邀请记录</span>
          <div class="close" @click="cloneDrawer">
            <i class="el-icon-close" style="font-size: 24px;" />
          </div>
        </div>
      </div>
      <!--列表 -->
        <div class="container-module">
          <el-form :inline="true" class="search-form" size="small">
            <el-row style="display: flex">
              <div style="flex: 1">
                <el-form-item class="search-form-item" label="订单编号" style="margin: 5px 0">
                  <el-input clearable placeholder="请输入订单编号" v-model="searchForm.order_no" class="input-with-select">
                  </el-input>
                </el-form-item>
                <el-form-item class="search-form-item" label="邀请人ID" style="margin: 5px 0">
                  <el-input clearable placeholder="请输入邀请人ID" v-model="searchForm.share_id" class="input-with-select">
                  </el-input>
                </el-form-item>
                <el-form-item
                  label="下单时间"
                  class="search-form-item"
                  v-if="searchDisplay"
                >
                  <el-date-picker
                    clearable
                    @change="timeWay"
                    value-format="yyyy-MM-dd HH:mm"
                    v-model="time"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  >
                  </el-date-picker>
                </el-form-item>
              </div>
              <div style="padding: 5px 0">
                <el-form-item>
                  <el-button size="small" type="primary" icon="el-icon-search" @click="getinventorylist">查询</el-button>
                  <el-button size="small" type="primary" icon="el-icon-refresh" @click="resetting">重置</el-button>
                  <el-button v-if="!searchDisplay" type="warning" icon="el-icon-caret-bottom"
                    @click="searchDisplay = true">展开</el-button>
                  <el-button v-else type="warning" icon="el-icon-caret-top" @click="searchDisplay = false">收起</el-button>
                </el-form-item>
              </div>
            </el-row>
          </el-form>
        </div>
        <el-divider></el-divider>
        <div style="padding: 0 20px">
          <div class="marginBottom">
            <el-row :gutter="20">
              <el-col :xs="24" :sm="16">
                <div class="left-panel">
                  <el-button type="text"></el-button>
                </div>
              </el-col>
              <el-col :xs="24" :sm="8">
                <div class="right-panel el-button-group">
                  <el-button class="" icon="el-icon-refresh" size="mini" @click="resetting"></el-button>
                  <el-dropdown trigger="click" :hide-on-click="false">
                    <span class="el-dropdown-link">
                      <el-button class="" icon="el-icon-s-operation" size="mini"></el-button>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                        <el-checkbox v-model="checkboxTableThead"
                          :label="fruit">{{ tableTheadOptions[fruit].label }}</el-checkbox>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </el-col>
            </el-row>
          </div>

          <el-row :gutter="20">
            <el-col class="new_table_card">
              <el-table v-loading="loading" highlight-current-row :data="inventorylist" :header-cell-style="{
                'background-color': '#f3f8fe',
                color: '#606266',
                height: '50px',
              }" style="width: 100%" height="100%">
                <el-table-column v-for="fruit in tableThead" :key="fruit" :label="tableTheadOptions[fruit].label"
                  :width="
                  tableTheadOptions[fruit].width
                    ? tableTheadOptions[fruit].width + 'px'
                    : 'auto'
                " align="center">
                  <template slot-scope="scope">
                    <div v-if="fruit == 'order_status'">
                      <span v-if="scope.row.order_status == 0">全部</span>
                      <span v-if="scope.row.order_status == 1">从供货商拿货</span>
                      <span v-if="scope.row.order_status == 2">商品售出</span>
                      <span v-if="scope.row.order_status == 3">订单取消退回</span>
                      <span v-if="scope.row.order_status == 4">商品下架回流</span>
                      <span v-if="scope.row.order_status == 5">商品减库存</span>
                      <span v-if="scope.row.order_status == 6">商户商品上架</span>
                      <span v-if="scope.row.order_status == 9">售后订单换货</span>
                      <span v-if="scope.row.order_status == 7">商户商品补货</span>
                      <span v-if="scope.row.order_status == 10">订单退货</span>
                      <span v-if="scope.row.order_status == 11">参与秒杀活动扣除</span>
                      <span v-if="scope.row.order_status == 12">秒杀活动下架回流</span>
                    </div>
                    <div v-else>
                    <el-tooltip placement="top" :content="
                        scope.row[fruit] ? scope.row[fruit].toString() : '-'
                      ">
                      <div class="one_line_hidden">
                        {{ scope.row[fruit]==0 ||scope.row[fruit]? scope.row[fruit] : "-" }}
                      </div>
                    </el-tooltip>
                  </div>




                    <div>
                    </div>
                  </template>
                 

                </el-table-column>

              </el-table></el-col>
            <el-col>
              <pagination v-show="total > 0" :total="total" :page.sync="searchForm.page" :limit.sync="searchForm.count"
                @pagination="getinventorylist" />
            </el-col>
          </el-row>
        </div>
    </el-drawer>
  </div>
</template>
<script>
import { getordinorylisy } from "@/api/recruitment/index"
  const tableTheadOption = {
    id: {
      label: "订单编号",
      field: "id",
    },
    direct_user_id:{
      label: "直推id",
      field: "direct_user_id",
    },
    indirect_user_id:{
      label: "间推id",
      field: "indirect_user_id",
    },
    user_id: {
      label: "邀请人ID",
      field: "user_id",
    },
    product_id: {
      label: "被邀请人ID",
      field: "product_id",
    },
    goods_id: {
      label: "商品ID",
      field: "goods_id",
    },
    pay_total: {
      label: "商品金额",
      field: "pay_total",
    },
    order_time: {
      label: "下单时间",
      field: "order_time",
    },
    order_status: {
      label: "订单状态",
      field: "order_status",
    },
    direct_commission: {
      label: "直推佣金（元）",
      field: "direct_commission",
    },
    indirect_commission: {
      label: "间推佣金（元）",
      field: "indirect_commission",
    },
    status:{
      label: "佣金到账状态",
      field: "status",
    },
  };
  const allTableThead = ["id", "direct_user_id", "indirect_user_id","user_id","product_id","goods_id","pay_total","order_time", "order_status", "direct_commission","indirect_commission","status"];
  const defaultTableThead = ["id", "direct_user_id","indirect_user_id", "product_id","pay_total","order_time","status"];
  export default {
    name: 'saveInventory',
    components: {

    },
    data() {
      return {
        searchDisplay:false,
        loading:false,
        time:[],
        searchForm:{
          page:1,
          count:10,
          order_no:'',
          share_id:'',
          order_start_time:'',
          order_end_time:'',
        },
        total:0,
        drawerLoading: false,
        inventorylist:[],
        tableTheadOptions: tableTheadOption,
        allTableThead: allTableThead,
        tableThead: defaultTableThead, // 默认表头
        checkboxTableThead: defaultTableThead, // 默认表头值
      }
    },
    watch: {
      checkboxTableThead(valArr) {
        this.tableThead = this.allTableThead.filter(
          (i) => valArr.indexOf(i) >= 0
        );
        this.tableKey = this.tableKey + 1; // 为了保证table 每次都会重渲
      },
    },
    created() {},
    methods: {
      // 选择日期
      timeWay(val) {
        this.searchForm.order_start_time = val[0];
        this.searchForm.order_end_time = val[1];
      },
      //列表
      getinventorylist(){
        this.loading = true
        getordinorylisy(this.searchForm).then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            this.loading = false;
            return this.$messages.error(res.msg);
          }
          this.inventorylist = res.data.list
          this.total = res.data.total
          this.loading = false;
        })
      },
      resetting(){
        this.time = []
        this.searchForm.page = 1
        this.searchForm.count = 10
        this.searchForm.order_no = ''
        this.searchForm.share_id = ''
        this.searchForm.order_start_time = ''
        this.searchForm.order_end_time = ''
        this.getinventorylist();
      },
      //接收父组件传的值
      open(row) {
        console.log(row)
        this.searchForm.activity_id = row.id
        this.drawerLoading = true
        this.loading = true
        getordinorylisy(this.searchForm).then((res) => {
          this.loading = false
          this.inventorylist = res.data.list
          this.total = res.data.total
        })
      },
      cloneDrawer() {
        this.drawerLoading = false
      },
    }
  }
</script>
<style lang="scss">
  .container-module {
    padding: 20px 20px 10px 30px;
  }
</style>
